<!--
 * @Description  : 绑定手机号
 * @Author       : YiDing Xue
 * @Date         : 2023-02-23
 * @LastEditors  : YiDing Xue
 * @LastEditTime : 2023-03-10
-->
<template>
  <AppPage :right-icon="{ icon: '', size: 0, path: '' }" :left-icon="{ icon: 'pajamas:chevron-lg-left', size: 24, path: 'setting' }">
    <template #center>
      <span>{{ userStore.userInfo.phoneNumber ? '换绑手机号' : '绑定手机' }}</span>
    </template>

    <nut-form>
      <nut-form-item v-if="userStore.userInfo.phoneNumber" label="原手机号">
        <div>
          <nut-input v-model="userStore.userInfo.phoneNumber" class="nut-input-text" readonly type="text" />
        </div>
      </nut-form-item>
      <!-- 手机号 -->
      <nut-form-item label="手机号" required>
        <div>
          <nut-input v-model="phoneBindInfo.phoneNumber" class="nut-input-text" placeholder="请填写手机号" type="text" />
        </div>
      </nut-form-item>
      <!-- 短信验证码 -->
      <nut-form-item label="短信验证码" required>
        <nut-input v-model="phoneBindInfo.phoneCode" class="nut-input-text" placeholder="请输入短信验证码" clearable>
          <template #right>
            <nut-button color="#36ad6a" size="mini" @click="sendSMSCode">{{ codeNum === 0 ? '发送验证码' : `(${codeNum})发送验证码` }}</nut-button>
          </template>
        </nut-input>
      </nut-form-item>
    </nut-form>
    <!-- 提交按钮 -->
    <nut-button class="fixed top-55vh" color="#fcd006" round block @click="submit"> 提交 </nut-button>
  </AppPage>
</template>

<script setup>
import { isEmpty, setToken } from '@/utils'
import { getSMSCode, phoneBind } from '@/api/auth'
import { useUserStore } from '@/store'

const userStore = useUserStore()

onMounted(() => {
  clearInterval(clearId)
})
// 包含电话号码与验证码的响应式数据对象
const phoneBindInfo = reactive({
  phoneNumber: '',
  phoneCode: ''
})
// 验证码倒计时
const codeNum = ref(0)
// 是否发送了验证码 防止连点
const isClickSend = ref(false)
// 定时器id
let clearId

/** 发送短信验证码 */
const sendSMSCode = async () => {
  // 未输入手机号，展示提示
  if (isEmpty(phoneBindInfo.phoneNumber)) {
    $message.error('请输入手机号')
    return
  }
  // 再次发送验证码倒计时结束前不执行请求
  if (codeNum.value > 0) return
  // 防止连点
  isClickSend.value = true
  await getSMSCode(phoneBindInfo.phoneNumber)
  // 倒计时时间
  codeNum.value = 60
  // 如果有定时器存在，将定时器取消
  if (clearId) clearInterval(clearId)
  // 设置定时器
  clearId = setInterval(() => {
    codeNum.value--
    // 倒计时结束时取消定时器
    if (codeNum.value === 0) {
      clearInterval(clearId)
    }
  }, 1000)
}
/** 提交绑定申请 */
const submit = async () => {
  if (isEmpty(phoneBindInfo.phoneNumber)) {
    $message.error('请输入手机号')
    return
  }
  if (isEmpty(phoneBindInfo.phoneCode)) {
    $message.error('请输短信验证码')
    return
  }
  // 用户信息
  const result = await phoneBind(phoneBindInfo)
  if (result.code === 0) {
    userStore.setUserInfo(result.data.customerDTO)
    setToken(result.data.token)
    $message.success('绑定成功')
  }
}
</script>
<style scoped>
.header {
  text-align: center;
  margin-left: -35px;
  font-size: 18px;
}
.button {
  color: #ffffff;
  background-color: #fee883;
  margin: 370px 10px 20px 10px;
  width: 320px;
  height: 40px;
  border: none;
}
</style>
